<template>
	<view>
		<view v-if="onlyReceive" class="bg-white nav flex justify-around">
			<view class="cu-item" :class="index == TabCur ? ' cur' : ''" v-for="(item, index) in tabs" :key="index" @tap="tabSelect" :data-id="index">{{ item }}</view>
		</view>
		<view v-if="coupons.length>0" class="padding">
			<view v-for="(item,index) in coupons" :key="index" class="flex align-center justify-between padding margin-bottom" style="border-radius: 4px;background-image: linear-gradient(45deg, #FFF0F0, #ffffff);">
				<view>
					<text class="text-xs text-red">￥</text><text class="text-red text-lg">{{item.price}}</text>
					<view class="text-sm maring-top-sm">满{{item.man}}元可用</view>
					<view class="text-xs text-grey maring-top-sm">有效期至:{{item.invalidEndTime}}</view>
				</view>
				<view>
					<text @tap="clickReceive(item,index)" v-if="item.exts.received!=undefined && !item.exts.received" class="solid round text-white" style="background-color: #A5673F;padding: 5px 10px;">领取</text>
					<view v-if="item.exts.received!=undefined && item.exts.received" class="text-gray text-sm" style="width: 50px;height: 50px;line-height: 50px;border: 3px solid rgba(0,0,0,0.2);border-radius: 50%; transform:rotate(45deg);">已领取</view>
					<view v-if="mycouponstype == 'used'" class="text-gray text-sm" style="width: 50px;height: 50px;line-height: 50px;border: 3px solid rgba(0,0,0,0.2);border-radius: 50%; transform:rotate(45deg);">已使用</view>
					<view v-if="mycouponstype == 'overdate'" class="text-gray text-sm" style="width: 50px;height: 50px;line-height: 50px;border: 3px solid rgba(0,0,0,0.2);border-radius: 50%; transform:rotate(45deg);">已过期</view>
				</view>
			</view>
		</view>
		<view v-else class="padding text-center">
			暂无优惠券
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			TabCur: 0,
			tabs:['可使用','已使用','已过期'],
			coupons:[],
			
			mycouponstype : ''
		};
	},
	props:{
		onlyReceive:{
			type:[String,Boolean],
			default:false
		}
	},
	mounted() {
		//我的优惠券
		if(this.onlyReceive) {
			this.getAvaliable('normal');
		} else {
			this.getNormal();
		}
	},
	methods: {
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			// this.$emit('onChange',e.currentTarget.dataset.id)
			var type = '';
			if(this.TabCur == 0) {
				this.getAvaliable('normal');
			} else if(this.TabCur == 1) {
				this.getAvaliable('used');
			} else if(this.TabCur == 2) {
				this.getAvaliable('overdate');
			}
		},getNormal() {
			this.$get('mall/coupon/commonlist').then((res) => {
				this.coupons = res.data;
			});
		},getAvaliable(type) {
			this.coupons = [];
			this.mycouponstype = type;
			this.$get('mall/coupon/mycoupons',{type:type}).then((res) => {
				this.coupons = res.data;
			});
		},clickReceive(item,index) {
			this.$get('mall/coupon/receive',{couponId:item.id},'POST',true).then((res) => {
				if(res.data) {
					var cou = this.coupons[index];
					cou.exts.received = true;
					this.$set(this.coupons,index,cou);
				}
			});
		}
	}
}
</script>

<style>
.nav .cu-item {
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
}
.nav .cu-item.cur {
	color: #1c232b;
	border-color: #1c232b;
}
</style>
